<template>
	<view class="base-question">
		<!-- 自定义导航栏 -->
		<CustomNavbar />
		<!-- 用户信息 -->
		<UserInfo :user-info="userInfo" />
		<!-- 刷题记录 -->
		<RecordArea :classify-record="classifyRecord" />
		<!-- 中间区域 -->
		<CenterArea />
		<!-- 底部功能区域 -->
		<BottomArea />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useLoginStore,
		useBaseQuestionStore
	} from '@/store';
	import CustomNavbar from './cpns/custom-navbar/custom-navbar.vue'
	import UserInfo from './cpns/user-info/user-info.vue'
	import RecordArea from './cpns/record-area/record-area.vue'
	import CenterArea from './cpns/center-area/center-area.vue'
	import BottomArea from './cpns/bottom-area/bottom-area.vue'

	import useMenuButton from '@/hook/use-menu-button';

	// 获取胶囊信息
	const [navHeight, navTop] = useMenuButton()

	// 获取仓库数据
	const baseQuestionStore = useBaseQuestionStore()
	const loginStore = useLoginStore()
	const {
		classifyRecord
	} = storeToRefs(baseQuestionStore)
	const {
		userInfo
	} = storeToRefs(loginStore)
</script>

<style lang="scss">
	page {
		padding: 0 30rpx;
		background: linear-gradient(to bottom right, #FFE9F3 5%, #e7f1ff 60%, #d9e8ff 100%);
		box-sizing: border-box;
	}

	.input-value-border {
		border: 0rpx !important;
	}

	.input-value {
		padding: 0 !important;
	}
</style>